<template>
  <v-main>  
    <div class="login-form">
        <h1>登录</h1>
        <!-- v-model双向绑定,输入框数据保存到data（） -->
        <v-text-field v-model="username" label="用户名" outlined clearable></v-text-field>
        <v-text-field v-model="password" label="密码" type="password" outlined clearable></v-text-field>
        <!-- @ 是vue语法,将click事件绑定到一个函数上 -->
        <v-btn color="primary" @click="login()">登录</v-btn>
        <v-btn color="primary" text @click="signUp()">注册</v-btn>
    </div>
    </v-main>
</template>
<script>
export default {
  // data定义数据，函数变量，局部的
  data() {
    return {username:"",password:""}
  },
  //methods定义函数字典，类变量，全局的
  methods: {
    signUp(){
      this.$router.push({name:'SignUp'})
    },
    login(){
      let loginData = {
          username: this.username,
          password: this.password
      };
      // console.log(loginData);
      //=>se6函数，定义一个匿名函数，使用当前环境变量
      this.$api.user.login(loginData).then((res) => {
        //存储到浏览器，全局可用
        if (res.status == 200) {
        localStorage.setItem("token", res.data.access_token);
        // console.log(res);
        this.$router.push({name: "TestCase"});
        }
      });
      this.$api.testcase.getTestcase().then(response => {
        console.log(response)
      });
    }
  },
}

</script>
<style scoped>
.login-form{
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
</style>